<template>
    <!-- flex的y轴布局 -->
    <div class="containnerBL">
      <!-- 走马灯 -->
      <el-carousel :interval="3000" height="480px" width=30%>
        <el-carousel-item v-for="(img,index) in imgbox" :key="index" style="text-align:center;height:480px">
          <el-image :src="img.url" @mousedown="jumptobook($event,img.bookid)"></el-image>
        </el-carousel-item>
      </el-carousel>
      <!-- 好书推荐标题 -->
      <div style="text-align:center;background-color:rgba(80, 59, 13,0.4);width:100%;height:40px">
        <div style="padding-top:10px">好书推荐</div>
      </div>
      <div class="containnerBLChild">
          <!-- 输出所有推荐的书 -->
          <li style="font-size:20px" v-for="book in booklist" :key="book.bookid"
              @click="jumptobook($event,book.bookid)"><div>{{book
            .bookname}}</div></li>
      </div>
        <!-- 图书馆业务标题 -->
        <div style="text-align:center;background-color:rgba(80, 59, 13,0.4);width:100%;height:40px">
        <div style="padding-top:10px">图书馆业务</div>
      </div>
      <!-- 按钮栏设置 -->
      <div class="borrowblank" style="text-align:center;width:100%;height:120px;background-color:rgb(226, 226, 226)">
        <div style="padding-top:12px;padding-left:10%;width:80%">
        <el-button type="warning" @click="bookborrow">图书借阅</el-button>
        <el-button type="warning" @click="announcePage">馆内公告</el-button>
        </div>
        <div style="padding-top:12px;padding-left:10%;width:80%">
        <el-button type="warning" @click="readplan">阅读计划</el-button>
        <el-button type="warning">功能待续</el-button>
        </div>
      </div>
    </div>
</template>

<script>

export default {
name:'ShadowPicture',
data(){
    return{
        imgbox:[//图片信息，走马灯的图片
          {url:require("../assets/book1.jpg"),bookid:1},
          {url:require("../assets/book2.jpg"), bookid:2},
          {url:require("../assets/book3.jpg"), bookid:3}
        ],

        booklist:[{bookname:"《儒林外史》",bookid:3},
                  {bookname:"《浮生六记》",bookid:4},
                  {bookname:"《生如夏花》",bookid:5},
                  {bookname:"《我们仨》",bookid:6},
                  {bookname:"《海子诗全集》",bookid:7},
                  {bookname:"《慢煮生活》",bookid:8},
                  {bookname:"《活着》",bookid:9},
                  {bookname:"《文化苦旅》",bookid:10},],//推荐书的信息
    }
},
methods:{
  jumptobook(_,bookid){//跳转到推荐书框里点击的书籍
    // alert("here jump to the book"+bookid)
  },
  bookborrow(){//借书页面
    this.$bus.$emit('bookborrow')
  },
  announcePage(){//公告页面
    this.$bus.$emit('libAnnounce')
  },
  readplan(){
    this.$bus.$emit('readPlan')
  },
},
}
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #ffffff;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #d6d6d63f;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d6d6d63f;
  }

  div.containerBL{
    display: flex;
    flex-direction: column;
    width: 20%;
    height: auto;
  }
  div li{
    width: 100%;
    height: 50px;
    background-color: rgb(226, 226, 226);
    border-bottom: 1px solid rgb(194, 194, 194);
    text-align:center;
    list-style-type:none;
  }
  div li div{
    padding-top: 15px;
  }
  div.containnerBLChild{
    overflow: auto;
    max-height: 300px;
  }
</style>
